<template>
	<view v-if="PermissionFlag" class="course">
		<view class="book_Box">
			<view class="book_Box_inner">
				<view class="book_Box_left" @click="handleBookShow">
					<view class="book_Box_left_name">
						{{SemesterName || ""}}
					</view>
					<image src="https://mp.blrwworkshop.com/imgs/low.png.png" mode=""></image>
				</view>
				<view class="book_Box_right" @click="handleDownList">
					<image src="https://mp.blrwworkshop.com/imgs/fileIcon.png" mode=""></image>
					<view class="">
						下载列表
					</view>
				</view>
			</view>

			<view v-if="bookshow" class="bookContent">
				<view class="book_type">
					上册
				</view>
				<view class="SemesterContent">

					<view class="SemesterItem" v-for="(item,index) in GradeList" :key="index"
						:class="{ bg_student: SemesterCurrindextop == index && role==1 && Semester==1 ,bg_parent: SemesterCurrindextop == index && role==2 && Semester==1}"
						@click="handleChangeSeme(item,index,1)">
						{{item.gradeName}}上册
					</view>
				</view>

				<view class="book_type">
					下册
				</view>
				<view class="SemesterContent">
					<view class="SemesterItem" v-for="(item,index) in GradeList" :key="index"
						:class="{ bg_student: SemesterCurrindextop == index && role==1 && Semester==2 ,bg_parent: SemesterCurrindextop == index && role==2 && Semester==2}"
						@click="handleChangeSeme(item,index,2)">
						{{item.gradeName}}下册
					</view>
				</view>
			</view>
		</view>

		<view class="Unit_Box">
			<u-tabs v-if="unitList.length > 0" :list="unitList" @click="clickUnit" :current="tabsCurrent"
				:lineColor="role==1?'#FFA116':'#41C76F'" :inactiveStyle="{
        color: '#B4B4B4',
        fontSize:' 28rpx',fontWeight: 500,
    }" :activeStyle="{
        color: '#333333',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }">
				<view slot="right" class="right" style="padding-left: 4px;"
					@click="tabslistContenShow = !tabslistContenShow">
					<image src="https://mp.blrwworkshop.com/imgs/low.png.png" mode=""></image>
				</view>
			</u-tabs>


			<view v-if="tabslistContenShow" class="tabslistContent">
				<view class="tabsItem"
					:class="{tabsItemed1:tabsCurrent==index&&role==1,tabsItemed2:tabsCurrent==index&&role==2}"
					v-for="(item,index) in unitList" :key="index" @click="handleChangeTabs(item,index)">
					{{item.unitName}}
				</view>
			</view>
		</view>


		<view class="Tag_Box">
			<view class="Tag_Box_Item" v-for="(item,index) in TagList"
				:class="{bg_student:role ==1 && TagCurrindex==index,bg_parent:role==2 && TagCurrindex==index}"
				:key="index" @click="handleChangeTag(item,index)">
				{{item.labelName}}
			</view>
		</view>


		<view v-if="leftTabs.length>0" class="contentBox">
			<view class="main-content">
				<scroll-view scroll-y="true" class="left-panel" @scrolltolower="lower">
					<!-- <view class="left-panel"> -->
					<view class="primary-list">
						<view v-for="(tab, idx) in leftTabs" :key="tab.lessonName">
							<view :class="['primary-item', { active: leftTabIndex === idx }]"
								@click="handleLeftTab(idx)">
								{{ tab.lessonName }}
							</view>
							<!-- 只在当前选中的一级tab下方显示二级tab -->
							<view v-if="leftTabIndex === idx" class="secondary-list">
								<view v-for="(sub, sidx) in tab.chapters" :key="sub.chapterName"
									:class="['secondary-item', { active: subTabIndex == sidx && role ==1 }, { actives: subTabIndex == sidx && role ==2 }]"
									@click.stop="subTabIndex = sidx">
									{{ sub.chapterName }}
								</view>
							</view>
						</view>
					</view>
					<!-- </view> -->
				</scroll-view>


				<scroll-view scroll-y="true" class="right-content" @scrolltolower="lowerCourseList">
					<!-- <view class="right-content"> -->
					<view class="Course_item" v-for="(item,index) in CourseList" :key="index"
						@click="handleCourseDetail(item,index)">
						<view class="title">
							{{ item.chapterName }}
						</view>
						<view class="Course_item_inner">
							<view class="Course_item_left">
								<image :src="item.defaultCoverAddress" mode="aspectFill"></image>
								<image v-if="item.chapterType == 1" class="videozz"
									src="https://mp.blrwworkshop.com/imgs/videoimg.png" mode="">
								</image>
							</view>
							<view class="Course_item_Content">
								<view class="name dot">
									{{item.chapterName}}
								</view>
								<view class="desc dot">
									<u-parse :content="item.chapterIntro"></u-parse>
								</view>
								<image class="zsdImg"
									:src="role==1 ?'https://mp.blrwworkshop.com/imgs/zsd.png':'https://mp.blrwworkshop.com/imgs/zsds.png'"
									mode="" @click.stop="handleKnowlwdgePoints(item,index)"></image>
							</view>
							<view v-if="item.isLatestWatched ==1" class="lastimg">
								<image
									:src="role==1 ? 'https://mp.blrwworkshop.com/imgs/lastimg.png' :'https://mp.blrwworkshop.com/imgs/lastimgs.png'"
									mode=""></image>
							</view>
							<view v-if="item.progress == 100" class="lastimg">
								<image src="https://mp.blrwworkshop.com/imgs/looked.png" mode=""></image>
							</view>
						</view>

						<view class="progressBox">
							<view v-if="item.chapterType == 1" class="progres_time">
								已看{{item.viewedDurationWeb || "0分钟"}}
							</view>
							<view class="progres_content">
								<view class="progres">
									<u-line-progress :percentage="item.progress ||0"
										:activeColor="role == 1 ? '#FFA116' : '#41C76F'" :showText="false"
										height="6"></u-line-progress>
								</view>
								<view class="" :class="role == 1 ? 'color_student' : 'color_parent'">
									{{item.progress ||0}}%
								</view>
							</view>
						</view>
					</view>
					<!-- </view> -->
				</scroll-view>


			</view>
		</view>

		<view v-else class="dataNull">
			<image
				:src="role==1?'https://mp.blrwworkshop.com/imgs/dataNull.png':'https://mp.blrwworkshop.com/imgs/dataNulls.png'"
				mode=""></image>
			<view class="">
				暂无课程列表
			</view>
		</view>


		<!-- :closeOnClickOverlay="true" @close="bookshow = false" -->
		<!-- <u-popup :show="bookshow" bgColor="transparent" mode="top" overlayOpacity="0" :closeOnClickOverlay="true"
			@close="bookshow = false">
			<view class="bookContent">
				<view class="book_type">
					上册
				</view>
				<view class="SemesterContent">

					<view class="SemesterItem" v-for="(item,index) in GradeList" :key="index"
						:class="{ bg_student: SemesterCurrindextop == index && role==1 && Semester==1 ,bg_parent: SemesterCurrindextop == index && role==2 && Semester==1}"
						@click="handleChangeSeme(item,index,1)">
						{{item.gradeName}}上册
					</view>
				</view>

				<view class="book_type">
					下册
				</view>
				<view class="SemesterContent">
					<view class="SemesterItem" v-for="(item,index) in GradeList" :key="index"
						:class="{ bg_student: SemesterCurrindextop == index && role==1 && Semester==2 ,bg_parent: SemesterCurrindextop == index && role==2 && Semester==2}"
						@click="handleChangeSeme(item,index,2)">
						{{item.gradeName}}下册
					</view>
				</view>
			</view>
		</u-popup> -->


		<custom-tabbar :current="1" />
	</view>

	<view v-else class="course Permission">
		<u-navbar title="无权限" :autoBack="true">
		</u-navbar>
		<view class="dataNull">
			<image
				:src="role==1?'https://mp.blrwworkshop.com/imgs/Permission.png':'https://mp.blrwworkshop.com/imgs/Permissions.png'"
				mode=""></image>
			<view class="">
				暂无权限
			</view>
			<view class="PermissionTip">
				如有疑问，<text :class="{color_student:role==1,color_parent:role==2}">点击此处</text>联系客服
			</view>
		</view>
		<custom-tabbar :current="1" />
	</view>

</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar.vue';
	import {
		qryGrade,
		listAll,
		qryLabel,
		searchLessonChapterTree,
		viewChapter
	} from "@/api/course.js"
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				role: uni.getStorageSync('role'),
				GradeList: [], //年级列表
				Semester: 1, //1上册 2下册
				SemesterName: "", //年级上下册名字
				gradeId: "", //年级id
				unitList: [], //单元列表
				unitId: "", //单元id
				current: 0,
				TagList: [],
				labelId: "", //标签id
				TagCurrindex: 0,
				leftTabs: [],
				leftTabIndex: 0,
				subTabIndex: 0,
				CourseList: [],
				bookshow: false,
				SemesterCurrindextop: 0,
				pageNum: 1,
				PermissionFlag: false,
				total: 0,
				tabsCurrent: 0,
				tabslistContenShow: false,
			}
		},
		computed: {
			currentContent() {
				if (this.leftTabs.length == 0) return
				const main = this.leftTabs[this.leftTabIndex].lessonName
				const sub = this.leftTabs[this.leftTabIndex].chapters[this.subTabIndex].chapterName
			}
		},
		onShow() {
			this.role = uni.getStorageSync('role')
			this.handleserData()
		},
		async onLoad() {
			// await this.handleGetqryGrade()
			// await this.handleGetlistAll()
			// await this.handleGetqryLabel()
			// await this.handleSearchLessonChapterTree()
			// let that = this
			// uni.$on('CourseListUpdated', (data) => {
			// 	if (data.refresh) {
			// 		that.pageNum = 1
			// 		that.leftTabs = []
			// 		that.CourseList = []
			// 		that.handleSearchLessonChapterTree();
			// 	}
			// });
			// uni.$on('changeRole', async (data) => {
			// 	this.handleserData()
			// });

		},
		methods: {
			async handleserData() {
				this.GradeList = []
				this.SemesterName = ""
				this.pageNum = 1
				this.leftTabs = []
				this.CourseList = []
				this.unitList = []
				this.tabsCurrent = 0
				this.TagList = []
				this.TagCurrindex = 0
				this.leftTabIndex = 0
				this.subTabIndex = 0
				this.SemesterCurrindextop = 0
				await this.handleGetqryGrade()
				await this.handleGetlistAll()
				await this.handleGetqryLabel()
				await this.handleSearchLessonChapterTree()
			},
			//年级
			async handleGetqryGrade() {
				let res = await qryGrade()
				if (res.code == 200) {
					if (res.data.length == 0) {
						this.PermissionFlag = false
						return
					} else {
						this.PermissionFlag = true
						this.GradeList = res.data || []
						this.gradeId = this.GradeList[0].id
						this.SemesterName = this.GradeList[0].gradeName + '上册'
					}
				}
			},
			//单元
			async handleGetlistAll() {
				let res = await listAll()
				if (res.code == 200) {
					this.unitList = res.data || []
					this.unitId = this.unitList[0].id
					this.unitList.forEach((item, index) => {
						item.name = item.unitName
					})
				}
			},
			//标签
			async handleGetqryLabel() {
				let res = await qryLabel()
				if (res.code == 200) {
					this.TagList = res.data || []
					this.labelId = this.TagList[0].id
				}
			},
			async handleSearchLessonChapterTree() {
				let res = await searchLessonChapterTree({
					pageNum: this.pageNum,
					pageSize: 10,
					gradeId: this.gradeId,
					volumeType: this.Semester,
					unitId: this.unitId,
					labelId: this.labelId
				})

				if (res.code == 200) {
					this.leftTabs = [...this.leftTabs, ...res.data]
					this.CourseList = this.leftTabs.length > 0 ? this.leftTabs[0].chapters : [],
						this.total = res.total
				}
			},

			handleChangeSeme(item, index, type) {
				this.SemesterCurrindextop = index
				this.Semester = type
				this.gradeId = item.id
				this.SemesterName = type == 1 ? item.gradeName + '上册' : item.gradeName + '下册'
				this.pageNum = 1
				this.leftTabs = []
				this.handleSearchLessonChapterTree()
				this.bookshow = false
			},
			clickUnit(item) {
				this.unitId = item.id
				this.TagCurrindex = 0
				this.pageNum = 1
				this.leftTabs = []
				this.handleSearchLessonChapterTree()
				const index = this.unitList.findIndex(unit => unit.id === item.id);
				this.tabsCurrent = index
			},
			handleChangeTabs(item, index) {
				this.unitId = item.id
				this.tabsCurrent = index
				this.TagCurrindex = 0
				this.pageNum = 1
				this.leftTabs = []
				this.handleSearchLessonChapterTree()
				this.tabslistContenShow = false
			},
			handleChangeTag(item, index) {
				// console.log("item", item)
				this.labelId = item.id
				this.TagCurrindex = index
				this.pageNum = 1
				this.leftTabs = []
				this.handleSearchLessonChapterTree()
			},
			handleLeftTab(idx) {
				this.leftTabIndex = idx
				this.subTabIndex = 0 // 切换主tab时，子tab重置为第一个
				this.CourseList = this.leftTabs[this.leftTabIndex].chapters
			},
			handleBookShow() {
				this.bookshow = !this.bookshow
			},
			lowerCourseList() {
				// this.pageNum ++ 
				// console.log("lowerCourseList")
			},
			handleDownList() {
				uni.navigateTo({
					url: "/pages/coursePackage/downloadList/downloadList"
				})
			},
			handleCourseDetail(item, index) {
				uni.navigateTo({
					url: `/pages/coursePackage/courseDetail/courseDetail?chapterId=${item.chapterId}`
				})
			},
			handleKnowlwdgePoints(item, index) {
				uni.navigateTo({
					url: `/pages/coursePackage/knowledgePoints/knowledgePoints?chapterId=${item.chapterId}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.course {
		width: 100%;
		min-height: 100vh;
		background: #F9F9F9;

		.book_Box {
			width: 100%;
			background: #FFFFFF;
			padding: 110rpx 24rpx 22rpx;
			box-sizing: border-box;
			position: relative;


			.book_Box_inner {
				width: 75%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.book_Box_left {
					display: flex;
					align-items: center;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-left: 16rpx;
					}
				}

				.book_Box_right {
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					line-height: 34rpx;
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.bookContent {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 30%;
				background: #FFFFFF;
				position: fixed;
				top: 220rpx;
				padding: 20rpx;
				box-sizing: border-box;
				box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(180, 180, 180, 0.3);
				z-index: 99999;
				overflow: auto;

				.book_type {
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
				}

				.SemesterContent {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 28rpx;
					margin-bottom: 60rpx;

					.SemesterItem {
						width: 168rpx;
						height: 48rpx;
						background: #F4F5F7;
						border-radius: 24rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						line-height: 48rpx;
						text-align: center;
						margin-bottom: 22rpx;
						margin-right: 10rpx;
					}

					.SemesterItem:nth-child(4n) {
						margin-right: 0rpx;
					}

					.SemesterItemed {}

					.bg_student {
						background: #FFA116;
						color: #ffffff;
					}

					.bg_parent {
						background: #41C76F;
						color: #ffffff;
					}
				}
			}


		}

		.Unit_Box {
			width: 100%;
			background: #FFFFFF;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			position: relative;

			.right {
				image {
					width: 54rpx;
					height: 54rpx;
				}
			}

			.tabslistContent {
				width: 118px;
				background-color: pink;
				position: absolute;
				right: 0;
				z-index: 999999;
				background: #FFFFFF;

				.tabsItem {
					width: 118px;
					height: 40px;
					font-size: 12px;
					color: #333333;
					line-height: 40px;
					text-align: center;
				}

				.tabsItemed1 {
					background: #FFF7D3;
					color: #FFA116;
				}

				.tabsItemed2 {
					background: #41C76F;
					color: #ffffff;
				}
			}
		}

		.Tag_Box {
			width: 100%;
			height: 84rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(180, 180, 180, 0.11);
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.Tag_Box_Item {
				width: 138rpx;
				height: 44rpx;
				background: #EAEAEA;
				border-radius: 22rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #C7C7C7;
				line-height: 44rpx;
				text-align: center;
				margin-right: 12rpx;
			}

			.Tag_Box_Itemed {
				background-color: #FFA116;
				color: #ffffff;
			}
		}
	}

	.contentBox {
		z-index: 0;
	}

	.main-content {
		display: flex;
		height: 600rpx;

		.left-panel {
			width: 220rpx;
			height: 70vh;
			background: #ffffff;
			display: flex;
			flex-direction: column;

			.primary-list {
				width: 100%;

				.primary-item {
					width: 150rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: left;
					padding-left: 32rpx;
					font-size: 28rpx;
					color: #B4B4B4;
					border-radius: 0 24rpx 24rpx 0;
					margin-bottom: 8rpx;
					font-weight: 500;
					transition: background 0.2s, color 0.2s;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */

					&.active {
						color: #333333;
						font-weight: bold;
					}
				}

				.secondary-list {
					margin: 0 0 8rpx 0;
					background-color: #F9F9F9;

					.secondary-item {
						width: 100rpx;
						height: 54rpx;
						line-height: 54rpx;
						margin-left: 32rpx;
						margin-bottom: 8rpx;
						padding: 0 24rpx;
						font-size: 24rpx;
						color: #B4B4B4;
						// background: #eaeaea;
						border-radius: 16rpx;
						transition: background 0.2s, color 0.2s;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */

						&.active {
							color: #FFA116;
							font-weight: bold;
						}

						&.actives {
							color: #41C76F;
							font-weight: bold;
						}
					}
				}
			}
		}

		.right-content {
			flex: 1;
			padding: 0 24rpx;
			height: 67vh;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin: 0rpx 0 20rpx;
			}

			.Course_item {
				width: 534rpx;
				// height: 288rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 16rpx 0;
				padding: 20rpx 0;


				.Course_item_inner {
					width: 100%;
					display: flex;
					align-items: center;
					position: relative;

					.lastimg {
						position: absolute;
						top: 0;
						right: 0;
						width: 158rpx;
						height: 44rpx;
						z-index: 2;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.Course_item_left {
						border-radius: 20rpx;
						// background-color: #FFEED4;
						position: relative;

						.videozz {
							position: absolute;
							top: 0;
							left: 0;
						}

						image {
							width: 268rpx;
							height: 202rpx;
							border-radius: 20rpx;
						}
					}

					.Course_item_Content {
						width: 226rpx;
						margin-left: 26rpx;
						padding-top: 30rpx;
						box-sizing: border-box;

						.name {
							font-weight: 600;
							font-size: 32rpx;
							color: #333333;
						}

						.desc {
							font-weight: 400;
							font-size: 24rpx;
							color: #B4B4B4;
							line-height: 34rpx;
							margin-top: 16rpx;
							height: 30rpx;
							overflow: hidden;

						}

						.dot {
							width: 100%;
							/* 必须设置固定宽度 */
							white-space: nowrap;
							/* 强制不换行 */
							overflow: hidden;
							/* 隐藏溢出内容 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
						}

						.zsdImg {
							width: 148rpx;
							height: 44rpx;
							margin-top: 10rpx;
						}


					}
				}



				.progressBox {
					width: 90%;
					margin-top: 8rpx;
					font-size: 24rpx;
					margin: auto;

					.progres_time {
						font-size: 24rpx;
						color: #B4B4B4;
						margin-top: 10rpx;
					}


					.progres_content {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.progres {
							width: 100%;
						}

					}


				}

			}

		}
	}




	.dataNull {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 200rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #DDDDDD;
		margin-top: 20rpx;

		image {
			width: 330rpx;
			height: 330rpx;

		}
	}


	.Permission {
		padding-top: 326rpx;

		.PermissionTip {
			margin-top: 68rpx;
		}
	}
</style>